<template>
  <div class="border-line card">
    <header-title title="自持房屋出租率" @fullScreen="handleFullScreen"></header-title>
    <a-spin :spinning="spining">
      <div class="card-content">
        <div class="a-flex a-row-between" :class="{ 'm-b-16': index !== 7 }" v-for="(item,index) in list" :key="index" v-show="index < 7">
          <a-tag
            :color="index+1 === 1 ? '#ff3232' : index === 2 ? '#ff9800' : index === 3 ? '#ffd200' : '#108ee9'"
            class="m-r-10"
          >{{ index +1 }}</a-tag
          >
          <div class="m-r-10 text-center" style="width: 100px">
            <ellipsis :length="14" tooltip> {{ item.XQMC }}</ellipsis>
          </div>
          <a-tooltip :title="`已租赁面积：${item.YZLMJ}㎡  总面积：${item.ZMJ}㎡`">
            <a-progress
              strokeColor="#ff3232"
              :percent="item.CZL * 100"
              size="small"
              :showInfo="false"
              style="flex: 1"
              class="m-r-10"
            />
          </a-tooltip>
          <span class="m-r-10 text-center text-success" style="width: 40px">{{ `${(item.CZL * 100).toFixed(2)}%` }}</span>
          <!-- <span
            class="text-center"
            :class="index % 2 === 0 ? 'text-success' : 'text-error'"
            style="width: 40px"
          >{{ index % 2 === 0 ? '+' : '-' }}{{ index * 10 }}%</span
          > -->
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import headerTitle from './headerTitle.vue'
// import { getZCFWCZL } from '@/api/datacharts'
import { Ellipsis } from '@/components'
export default {
  components: {
    headerTitle,
    Ellipsis
  },
  created () {
    // this.fetchData()
  },
  data () {
    return {
      spining: false,
      list: []
    }
  },
  methods: {
    fetchData () {
      // this.spining = true
      // getZCFWCZL().then(res => {
      //   this.list = res
      // }).finally(() => {
      //   this.spining = false
      // })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 346px;
  &-content {
    margin-top: 20px;
  }
}
/deep/ .ant-progress-inner {
  background-color: #0a337e;
}
</style>
